<script>
import homeJS from "../../assets/js/home";
import BaiduMap from "@/views/homePage/baiduMap.vue";
import Disc from "@/views/homePage/disc.vue";
import Remote from "@/views/homePage/remote.vue";
import GaoTeMap from "@/views/homePage/GaoTeMap.vue";
import * as echarts from "echarts/core";
import {ref} from "vue";

let myChart;
export default {

  ...homeJS,
  components: { // 引入组件
    BaiduMap,
    Disc,
    Remote,
    GaoTeMap
  },
  mounted() {
    this.initChart();
  },
  methods: {
    on_off() {
      console.log("jidsfa")
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        // 如果WebSocket连接已经存在并且状态为OPEN，则关闭连接
        this.ws.close();
        this.ws = null;
        // this.url = require('@/assets/img/image2.png');
        this.url = '';
        alert("连接已关闭");
      } else {
        console.log("来了")
        // 开发环境
        // this.ws = new WebSocket("ws://192.168.1.40:8082/video_socket");

        // 小车
        this.ws = new WebSocket("ws://127.0.0.1:8080/websocket");

        // 生产环境
        // this.ws = new WebSocket("ws://192.1.5.17:8082/video_socket");
        this.ws.onopen = function () {
          alert("连接成功");
        };

        this.ws.onerror = function () {
          alert("发生错误连接");
        };

        this.ws.onmessage = (event) => {
          const imageData = event.data;
          this.renderVideoAsync(imageData);
        };
      }
    },
    async sendMessage(message) {
      console.log(message);
      this.ws.send(message);
    },
    async renderVideoAsync(base64Data) {
      return new Promise((resolve) => {
        // renderVideo(base64Data);
        this.url = ref('data:image/jpeg;base64,' + base64Data).value;
        setTimeout(() => {
          // 执行需要延时执行的代码
          resolve();
        }, 50);
      });
    },
    initChart() {
      // 基于准备好的dom，初始化echart示例
      // if (myChart == null) {
      myChart = echarts.init(this.$refs.chart);
      // }
      const option = {
        title: {
          text: '假设雷达'
        },
        legend: {
          data: ['障碍物']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            {name: 'Sales', max: 6500},
            {name: 'Administration', max: 16000},
            {name: 'Information Technology', max: 30000},
            {name: 'Customer Support', max: 38000},
            {name: 'Development', max: 52000},
            {name: 'Marketing', max: 25000}
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '障碍物'
              }
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    },
  },
  data() {
    return {
      ws: homeJS.ws,
      // url: require('@/assets/img/image2.png'),
      url: '',
      mapStyle: {
        width: '450px',
        height: '400px',
        position: 'absolute',
        zIndex: 999
      },
      showMask: false
    }
  }
}

</script>

<template>
  <el-container style="background-color: #cccccc;width: 100%;height: 100%">
    <el-main>
      <el-row :gutter="20" >
        <el-col :span="16">
          <el-row class="bg-purple enhanced-container" style="height: 35%;">
            <el-col :span="8" class="video-column">
              <!-- 给 el-col 添加自定义类名 "video-column" -->
              <div v-show="url === ''">
                <el-empty class="empty-message" description="摄像头未连接"></el-empty>

              </div>
              <div v-show="url !== ''" class="video-display" style="width: 100%; height: 100%;">
                <!-- 为显示视频的 div 添加自定义类名 "video-display" -->
                <img ref="" alt="视频" :src="url"/>
                <!-- 添加 object-fit: cover; 保证图片填充整个容器而不变形 -->
              </div>
            </el-col>
            <el-col :span="8" >
              <el-empty description="摄像头未连接"></el-empty>
            </el-col>
            <el-col :span="8">
              <el-empty description="摄像头未连接"></el-empty>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="height: 30%;">
            <el-col :span="12" class="bg-purple">
              <div v-show="url === ''">
                <!-- 条件为假时显示的内容 -->
                <el-empty description="摄像头未连接"></el-empty>
              </div>
              <div v-show="url !== ''">
                <!-- 条件为假时显示的内容 -->
                <img ref="" style="width: 100%; height: 100%" alt="视频" :src="url"/>
              </div>
            </el-col>
            <el-col :span="12" class="bg-purple" style="margin-left: 10px">
              <div v-show="url === ''">
                <!-- 条件为假时显示的内容 -->
                <el-empty description="摄像头未连接"></el-empty>
              </div>
              <div v-show="url !== ''">
                <!-- 条件为假时显示的内容 -->
                <img ref="" style="width: 100%; height: 100%" alt="视频" :src="url"/>
              </div>

            </el-col>
          </el-row>

          <el-row class="bg-purple" style="height: 20%;">
            <el-col :span="8" style="margin-left: 50px">
              <Remote :ws="ws" :sendMessage="sendMessage"/>
            </el-col>
            <el-col :span="8" style="margin-left: 10px;margin-right: 10px">
              <!-- 生降区域-->
              <div style="width: 90%;height:100px;margin-left:10px">
                <div class="aa" style="height: 100%; display: flex;
                        justify-content: center; align-items: center;">
                  <button class="upDown" style="border-radius: 10px 0 0 10px;">
                    <img src="../../assets/img/升降/加号.png" alt="" style="margin-left: 20px;margin-top: 10px">
                  </button>
                  <button class="upDown" style="width: 40%;border-radius: 0 0 0 0;">
                    <img src="../../assets/img/升降/升降.png" alt="" style="margin-left: 10px;margin-top: 10px">
                  </button>
                  <button class="upDown" style="border-radius: 0 10px 10px 0;">
                    <img src="../../assets/img/升降/减号.png" alt=""
                         style="margin-right: 20px;margin-top: 10px">
                  </button>
                </div>
              </div>

              <!--  调式区域-->
              <div style="width: 90%;height:100px;margin-left:10px">
                <div class="aa" style="height: 100%; display: flex;
                        justify-content: center; align-items: center;">
                  <button class="upDown" style="border-radius: 10px 0 0 10px;">
                    <img src="../../assets/img/升降/加号.png" alt="" style="margin-left: 20px;margin-top: 10px">
                  </button>
                  <button class="upDown" style="width: 40%;border-radius: 0 0 0 0;">
                    <img src="../../assets/img/升降/调节.png" alt="" style="margin-left: 10px;margin-top: 10px">
                  </button>

                  <button class="upDown" style="border-radius: 0 10px 10px 0;">
                    <img src="../../assets/img/升降/减号.png" alt=""
                         style="margin-right: 20px;margin-top: 10px">
                  </button>
                </div>
              </div>

              <!--  开关等区域-->
              <div style="width: 90%;height:100px;margin-left: 10px">
                <div class="aa" style="height: 100%; display: flex;
                        justify-content: center; align-items: center;">
                  <button class="functionControl">
                    <img src="../../assets/img/开关.png" alt="" @click="on_off()">
                  </button>
                  <button class="functionControl">
                    <img src="../../assets/img/开灯.png" alt="">
                  </button>
                  <button class="functionControl">
                    <img src="../../assets/img/机器人.png" alt="">
                  </button>
                  <button class="functionControl">
                    <img src="../../assets/img/充电桩.png" alt="">
                  </button>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <Disc :ws="ws" :sendMessage="sendMessage"/>
            </el-col>
          </el-row>
        </el-col>

        <!--        第二列-->
        <el-col :span="8">
          <el-col class="bg-purple" :span="24">
            <el-row>
              <el-col :span="12">
                <el-empty description="摄像头未连接"></el-empty>
              </el-col>
              <el-col :span="12">
                <el-empty description="摄像头未连接"></el-empty>
              </el-col>
            </el-row>

          </el-col>

          <el-col class="bg-purple" :span="24" style="margin: 10px">
            <div ref="chart" style="width: 100%;height:300px;"/>
          </el-col>

          <el-col :span="24">
            <!--地图-->
<!--            <BaiduMap/>-->
            <el-button type="primary" plain size="mini">地图详情</el-button>
            <GaoTeMap style="width: 450px;height: 400px;"/>
          </el-col>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<style>
@import "../../assets/css/homePage/home.css";
</style>
